<template>
  <div class="phone-preview">
    <img :src="imageUrl" :alt="imageAlt" class="phone-image" />
  </div>
</template>

<script>
export default {
  name: "PhonePreview",
  props: {
    // 接收预览图片URL
    imageUrl: {
      type: String,
      default: "https://lingxin1314.oss-cn-beijing.aliyuncs.com/tem_back1.png",
    },
    // 接收预览图片alt文本
    imageAlt: {
      type: String,
      default: "智慧园区预览",
    },
  },
};
</script>

<style lang="scss" scoped>
/* 手机预览图容器 */
.phone-preview {
  position: relative;
}

.phone-image {
  max-height: 600px;
  width: auto;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
</style>
